<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>gaijin市场计算器</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    function Rate() {
        var price = new Number(document.getElementById("price").value)
        var rate = new Number(document.getElementById("rate").value)

        var cost = price * rate
        var point = cost + price

        document.getElementById("cost").innerText = cost.toFixed(2);
        document.getElementById("point").innerText = point.toFixed(2);
    }
</script>

<body>
    <div class="container">
        <div class="output">
            <label for="cost">手续费：</label>
            <p id="cost"> ****** </p>
        </div>
        <div class="output">
            <label for="point">盈亏点：</label>
            <p id="point"> ****** </p>
        </div>


        <div class="input">
            <label for="price">购入价格:</label>
            <input type="number" name="price" id="price" required>
        </div>
        <div class="input">
            <label for="rate">手续费率:</label>
            <input type="number" name="rate" id="rate" placeholder="0.15" value="0.15">
        </div>
        <div class="btn">
            <span style="position: absolute;">just JavaScript</span>
            <input type="button" onclick="Rate();" value="计算">
        </div>
    </div>

    <div id="vue-Calculate">
        <div class="output">
            <p>手续费：</p>
            <p>{{cost}}</p>
        </div>
        <div class="output">
            <p>盈亏点：</p>
            <p>{{point}}</p>
        </div>

        <div class="input">
            <label for="">购入价格：</label>
            <input type="number" v-model.number="price" required>
        </div>
        <div class="input">
            <label for="">手续费率：</label>
            <input type="number" v-model.number="rate">
        </div>
        <div class="btn">
            <input type="button" value="power by Vue">
        </div>
    </div>

    <div id="vue-Calculate-v2">
        <div class="output-v2">
            <div>
                <p>手续费：</p>
                <p>{{cost}}</p>
            </div>
            <div>
                <p>盈亏点：</p>
                <p>{{point}}</p>
            </div>
            <div>
                <p>收益率：</p>
                <p>{{profit}}%</p>
            </div>
        </div>

        <div class="input-v2">
            <div>
                <label for="">购入价格：</label>
                <input type="number" v-model.number="price">
            </div>
            <div>
                <label for="">手续费率：</label>
                <input type="number" v-model.number="rate">
            </div>
            <div>
                <label for="">目标价格：</label>
                <input type="number" v-model.number="target">
            </div>
        </div>
        <div class="btn">
            <input type="button" value="power by Vue">
        </div>
    </div>

</body>

<script>
    var vm1 = new Vue({
        el: '#vue-Calculate',
        data: {
            price: price = 0,
            rate: rate = 0.15,
        },
        computed: {
            cost() {
                if (this.price && this.rate) {
                    return (this.price * this.rate).toFixed(2)
                }
                else {
                    return "0.00"
                }
            },
            point() {
                if (this.price && this.rate) {
                    return (this.price * this.rate + this.price).toFixed(2)
                }
                else {
                    return "0.00"
                }
            },
        }
    }
    )
</script>


<script>
    var vm2 = new Vue({
        el: '#vue-Calculate-v2',
        data: {
            price: price = 0,
            rate: rate = 0.15,
            target: target = 0,
        },
        computed: {
            cost() {
                if (this.price && this.rate) {
                    return (this.price * this.rate).toFixed(2)
                }
                else {
                    return "0.00"
                }
            },
            point() {
                if (this.price && this.rate) {
                    return (this.price * this.rate + this.price).toFixed(2)
                }
                else {
                    return "0.00"
                }
            },
            profit() {
                if (this.price && this.rate && this.target) {
                    return ((this.target - (this.price * this.rate) - this.price) / this.price * 100).toFixed(2)
                }
                else {
                    return "-15"
                }
            }
        }
    }
    )
</script>

</html>